<template>
  <div>
    <div class="table_header_style flex_s">
      <span>文章分类</span>
      <el-button type="primary" @click="addArticleCatesFun">添加分类</el-button>
    </div>
    <div>
      <el-table :data="tableData" table-layout="fixed" class="table_style">
        <el-table-column prop="Id" label="序号" width="180" />
        <el-table-column prop="name" label="分类名称" width="180" />
        <el-table-column prop="alias" label="分类别名" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.row)" />

            <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-model="centerDialogVisible" title="添加分类" width="500" align-center>
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="分类别名" prop="alias">
        <el-input v-model="form.alias" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import {
  getArticleCates,
  addArticleCates,
  deleteCateById,
  getArticleById,
  updateCateById
} from '@/api/Artcate'
import { ElMessage } from 'element-plus'

let tableData = ref([])
let form = ref({ name: '', alias: '' })
let editFlag = ref(false)
const editID = ref('')
const ruleFormRef = ref()
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入分类名称',
      trigger: 'blur'
    }
  ],
  alias: [
    {
      required: true,
      message: '请输入分类别名',
      trigger: 'blur'
    }
  ]
})
const centerDialogVisible = ref(false)

onMounted(() => {
  taleDateFun()
})

const taleDateFun = async () => {
  const res = await getArticleCates()
  console.log('值=》', res)
  if (res.status == 0) {
    tableData.value = res.data
  }
}

const addArticleCatesFun = () => {
  clearForm()
  centerDialogVisible.value = true
}

const clearForm = () => {
  form.value = { name: '', alias: '' }
}

const submitForm = async (formEl) => {
  let tempRes = null
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      centerDialogVisible.value = false
      if (editFlag.value) {
        tempRes = await updateCateById({
          Id: editID.value,
          name: form.value.name,
          alias: form.value.alias
        })
      } else {
        tempRes = await addArticleCates(form.value)
      }

      const res = tempRes
      if (res.status === 0) {
        taleDateFun()

        ElMessage({
          message: res.message,
          type: 'success'
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const handleDelete = async (row) => {
  const res = await deleteCateById(row.Id)
  if (res.status === 0) {
    taleDateFun()
    ElMessage({
      message: res.message,
      type: 'success'
    })
  }
}

const handleEdit = async (row) => {
  editFlag.value = true
  editID.value = row.Id
  const res = await getArticleById(editID.value)
  if (res.status === 0) {
    form.value = { name: res.data.name, alias: res.data.alias }
    centerDialogVisible.value = true
  }
}
</script>
  
<style scoped lang="scss">
.table_header_style {
  width: 93%;
  background-color: #ffffff;
  padding: 20px 10px;
  margin: 10px auto 0 auto;
  border: 1px solid #e5e8ee;
  border-bottom: 0px transparent;
}
.table_style {
  width: 95%;
  margin: 0 auto;
  border: 1px solid #e5e8ee;
}
</style>
  